<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>手风琴</title>
  <style>
    ul {
      list-style: none;
    }

    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 1200px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }

    div li {
      width: 240px;
      height: 400px;
      float: left;
      transition: all 500ms;
    }

    div ul {
      width: 1200px;
    }
  </style>
</head>

<body>
  <div id="box">
    <ul>
      <li>
        <a href="#">
          <img src="./images/1.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/2.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/3.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/4.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/5.jpg" alt="">
        </a>
      </li>
    </ul>
  </div>
</body>
<script>
  // 目标: 手风琴效果
  // 1. 分析标签和样式
  // (核心): li容器的宽度, 图片本身1200+宽度, 但是容器宽度不够, 只显示一部分图片
  // 2. 获取li标签们
  let liList = document.querySelectorAll('#box li')
  // 3. 每个li - 鼠标移入事件
  for (let i = 0; i < liList.length; i++) {
    liList[i].addEventListener('mouseenter', function(){
      // 4. 排他思想-所有人宽度为100px
      for (let j = 0; j < liList.length; j++) {
        liList[j].style.width = "100px"
      }
      // 5. 目标标签, 宽度为800px
      this.style.width = '800px'
    })

    // 6. 每个li - 鼠标移出事件
    liList[i].addEventListener('mouseleave', function(){
      for (let j = 0; j < liList.length; j++) {
        liList[j].style.width = "240px"
      }
    })
  }
</script>

</html>